<template>
    <chart id="surface" :option="option_column" :style="'height:'+height"></chart>
</template>

<script>
    import 'echarts-gl';

    export default {
        name: "Surface",
        props: ['title', 'height', 'lineData'],
        data() {
            return {
                option_column: {
                    tooltip: {},
                    backgroundColor: '#fff',
                    visualMap: {
                        show: false,
                        dimension: 2,
                        min: 0,
                        max: 10,
                        inRange: {
                            color: [
                                // '#313695',
                                // '#4575b4',
                                // '#74add1',
                                // '#abd9e9',
                                '#e0f3f8',
                                '#ffffbf',
                                // '#fee090',
                                '#fdae61',
                                '#f46d43',
                                '#d73027',
                                '#a50026'
                            ]
                        }
                    },
                    xAxis3D: {
                        type: 'value'
                    },
                    yAxis3D: {
                        type: 'value'
                    },
                    zAxis3D: {
                        type: 'value',
                        // max: 1,
                        splitNumber: 1
                    },
                    grid3D: {
                        viewControl: {
                            // projection: 'orthographic'
                        },
                        boxHeight: 40
                    },
                    series: [
                        {
                            type: 'surface',
                            wireframe: {
                                show: false
                            },
                            shading: 'color',
                            data: [
                                [ 1, 1, 1 ], [ 1, 2, 1 ], [ 1, 3, 1 ], [ 1, 4, 2 ],
                                [ 1, 5, 3 ], [ 1, 6, 4 ], [ 1, 7, 5 ], [ 2, 1, 1 ],
                                [ 2, 2, 1 ], [ 2, 3, 2 ], [ 2, 4, 3 ], [ 2, 5, 4 ],
                                [ 2, 6, 5 ], [ 2, 7, 5 ], [ 3, 1, 2 ], [ 3, 2, 3 ],
                                [ 3, 3, 4 ], [ 3, 4, 4 ], [ 3, 5, 5 ], [ 3, 6, 6 ],
                                [ 3, 7, 7 ], [ 4, 1, 2 ], [ 4, 2, 3 ], [ 4, 3, 4 ],
                                [ 4, 4, 5 ], [ 4, 5, 5 ], [ 4, 6, 6 ], [ 4, 7, 7 ],
                                [ 5, 1, 4 ], [ 5, 2, 5 ], [ 5, 3, 5 ], [ 5, 4, 5 ],
                                [ 5, 5, 5 ], [ 5, 6, 5 ], [ 5, 7, 6 ], [ 6, 1, 3 ],
                                [ 6, 2, 4 ], [ 6, 3, 5 ], [ 6, 4, 5 ], [ 6, 5, 6 ],
                                [ 6, 6, 7 ], [ 6, 7, 8 ], [ 7, 1, 3 ], [ 7, 2, 3 ],
                                [ 7, 3, 5 ], [ 7, 4, 6 ], [ 7, 5, 6 ], [ 7, 6, 7 ],
                                [ 7, 7, 8 ], [ 8, 1, 5 ], [ 8, 2, 5 ], [ 8, 3, 6 ],
                                [ 8, 4, 7 ], [ 8, 5, 8 ], [ 8, 6, 9 ], [ 8, 7, 9 ],
                                [ 9, 1, 5 ], [ 9, 2, 6 ], [ 9, 3, 7 ], [ 9, 4, 8 ],
                                [ 9, 5, 9 ], [ 9, 6, 9 ], [ 9, 7, 9 ], [ 9, 4, 8 ],
                                [ 9, 5, 9 ], [ 9, 6, 9 ]
                            ]
                        }
                    ]
                }
            }
        }
    }
</script>

<style scoped>

</style>
